import {View, Text, Button} from 'react-native';
import {useState} from 'react'; // 导入useState钩子
/**
 * 你介绍一下useState
 * 1.是什么：是react内置的钩子函数
 * 2.做什么用：数据状态管理
 * 3.用法：传入一个初始值，返回数组：第一个元素是数据本身，第二个元素是函数修改的数据
 * 4.userState为了性能考量是异步的
 * 5 如果想要获取到修改后的数据的值，一般会给setNum 传递回调函数-参数就是变量修改后的值
 * @returns 
 */
export default function App() {
  // 声明状态变量num，初始值为0，同时获取更新函数setNum
  const [num, setNum] = useState(0);
  const add1= () => {
    setNum(num + 1);
    console.log('A', num);
    setNum(num + 1);
    console.log('B', num);
    setNum(num + 1);
    console.log('C', num);
  }
  const sub1= () => {
    setNum(preNum => {
      console.log('A', preNum);
      return preNum + 1;
    })
    setNum(preNum => {
      console.log('B', preNum);
      return preNum + 1;
    })
    setNum(preNum => {
      console.log('C', preNum);
      return preNum + 1;
    })

  }
  return (
    <View>
      <Text>base</Text>
      <Text>{num.toString()}</Text> {/* 显示当前状态值 */}
      {/* 方式1：直接传入新值来更新状态 */}
      <Button title="Increment" onPress={add1} />
      {/* 方式2：使用函数式更新，基于先前的状态计算新状态 */}
      <Button title="Increment" onPress={sub1} />
    </View>
  );
};